<template>
  <div class="outer-container">
    <div v-for="(item, index) in items" :key="index" class="grid-item" @click="goToDetail">
      <span class="ellipsis">
        <span class="highlight">{{ item.highlight }}</span> | {{ item.content }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AuthorYouFollow',
  components: {},
  data() {
    return {
      items: [
        { highlight: "落波音背后: 若波音", content: "特朗普官宣F-47花落波音背后: 若波音洛马内讧其将获益。" },
        { highlight: "美高官", content: "特朗普官宣F-47花落波音背后: 若波音洛马内讧其将获益。" },
        { highlight: "音洛马内讧", content: "特朗普官宣F-47花落波音背后: 若波音洛马内讧其将获益。" },
        { highlight: "美高官", content: "特朗普官宣F-47花落波音背后: 若波音洛马内讧其将获益。" },
        { highlight: "美高官", content: "特朗普官宣F-47花落波音背后: 若波音洛马内讧其将获益。" }
      ]
    }
  },
  methods: {
    goToDetail() {
      console.log("111");
      this.$router.push({
        path: '/detail',
      })
    }
  }
}
</script>

<style scoped>
/* 外层容器样式 */
.outer-container {
  width: 365px;
  height: 160px;
  display: grid;
  grid-template-columns: 1fr; /* 1列 */
  grid-template-rows: repeat(5, 1fr); /* 5行 */
}

/* 网格项样式 */
.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 文本省略样式 */
.ellipsis {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  /* padding: 0 4px; */
  transition: color 0.3s ease;
}

/* 高亮部分样式 */
.highlight {
  font-weight: bold;
}

/* 鼠标悬停状态样式 */
.grid-item:hover .ellipsis {
  color: #ff4d4f;
  cursor: pointer;
}
</style>